<template>
  <el-dialog
    v-model="props.addDialog"
    title="维保转交"
    width="30%"
    :show-close="false"
    :destroy-on-close="true"
    :close-on-click-modal="false"
  >
    <el-form :model="form" ref="formRef">
      <el-form-item label="" style="width: 100%; margin-right: 15px">
        <div>原维保人员：{{ form.originalUserName }}</div>
      </el-form-item>
      <el-form-item
        label="任务转交至"
        prop="transmitUserId"
        :rules="{
          required: true,
          message: '请选择维保人',
          trigger: 'change'
        }"
      >
        <el-select
          v-model="form.transmitUserId"
          style="width: 70%; margin-right: 15px"
          filterable
          multiple
          collapse-tags
          :multiple-limit="form.checkStatus == '1' ? 1 : 5"
          placeholder="可搜索姓名/下拉选择维保人"
          @change="checkUserChange"
        >
          <el-option
            v-for="item in checkUsers"
            :label="item.realName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <div style="display: flex; width: 100%">
          <el-form-item
            label="转交原因"
            style="width: 100%; margin-right: 15px"
            :prop="form.reason"
            :rules="{
              required: false,
              message: '请输入原因',
              trigger: 'blur'
            }"
          >
            <el-input
              v-model="form.reason"
              type="textarea"
              placeholder="请输入原因"
              maxlength="100"
              show-word-limit
              style="width: 100%"
              :rows="3"
            />
          </el-form-item>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel(formRef)">取消</el-button>
        <el-button type="primary" @click="submit(formRef)" :loading="loading">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage, FormInstance } from 'element-plus'
import { ref, watch } from 'vue'
import { maintainTransmit } from '/@/api/maintain'
import { getDirectorListByType } from '/@/api/publicApi'
const props = defineProps({
  addDialog: Boolean,
  primaryForm: Object
})
const emit = defineEmits(['addCancel', 'addSubmit'])
const formRef = ref<FormInstance>()
const deviceRef = ref()
const loading = ref(false)
const formLabelWidth = ref('100px')
const form = ref({
  batchFlag: 0, //是否批量转交;0:否;1:是
  taskId: '', //任务id
  originalUserIdsAsk: '', //原处理人id
  originalUserName: '',
  transmitUserId: [] as any, //新处理人id
  transmitName: [] as any, //新处理人姓名
  reason: '', //原因
  checkStatus: ''
})

const checkUsers = ref<any>([])
const getCheckUser = () => {
  const params = {
    directorType: 1,
    userId: form.value.originalUserIdsAsk
  }
  getDirectorListByType(params).then((res) => {
    if (res.code == 0) {
      checkUsers.value = res.data
    }
  })
}

// getCheckUser()
const checkUserChange = (val: any) => {
  let arr = [] as any
  val.map((it: any) => {
    checkUsers.value.forEach((i: any) => {
      if (i.id == it) {
        arr.push(i.realName)
      }
    })
  })
  form.value.transmitName = arr
}

const submit = async (formEl: FormInstance | undefined) => {
  loading.value = true
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      let params = JSON.parse(JSON.stringify(form.value))
      params.transmitName = form.value.transmitName.join(',')
      params.transmitUserId = form.value.transmitUserId.join(',')

      maintainTransmit(params)
        .then((res) => {
          if (res.code == 0) {
            ElMessage.success('转交成功')
            loading.value = false
            form.value = {
              batchFlag: 0, //是否批量转交;0:否;1:是
              taskId: '', //任务id
              originalUserIdsAsk: '', //原处理人id
              originalUserName: '', //原处理人
              transmitUserId: [] as any, //新处理人id
              transmitName: [] as any, //新处理人姓名
              reason: '', //原因
              checkStatus: ''
            }
            emit('addSubmit')
          } else {
            loading.value = false
          }
        })
        .catch((res) => {
          loading.value = false
        })
    } else {
      loading.value = false
    }
  })
}

const cancel = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  form.value = {
    batchFlag: 0, //是否批量转交;0:否;1:是
    taskId: '', //任务id
    originalUserIdsAsk: '', //原处理人id
    originalUserName: '', //原处理人
    transmitUserId: [] as any, //新处理人id
    transmitName: [] as any, //新处理人姓名
    reason: '', //原因
    checkStatus: ''
  }
  emit('addCancel')
}
watch(
  () => props.addDialog,
  () => {
    form.value.taskId = props.primaryForm?.id
    form.value.originalUserIdsAsk = props.primaryForm?.maintainUser
    form.value.originalUserName = props.primaryForm?.maintainUserName
    form.value.checkStatus = props.primaryForm?.maintainStatus

    getCheckUser()
  }
)
</script>
<style scoped lang="scss">
.addList {
  color: var(--el-color-primary);
  cursor: pointer;
}
div {
  font-size: var(--el-font-size-base);
}
</style>
